import {useModel} from '@umijs/max'
import React from 'react'
import {ProDescriptionsItemProps,ProTable} from '@ant-design/pro-components';
import {Button, Divider, message, Popconfirm, Tag} from 'antd';
import {PlusOutlined, FormOutlined} from '@ant-design/icons';

const StaffList: React.FC = ({children}) => {
  const {staffCategoryEnum, actionRef, handleQuery, handleReinstate, handleDismiss } = useModel("Staff.model", 
    model => {
    return {
      staffCategoryEnum: model.staffCategoryEnum,
      actionRef: model.actionRef,
      handleQuery: model.handleQuery,
      handleReinstate: model.handleReinstate,
      handleDismiss: model.handleDismiss,
      staffCategory: model.staffCategory,
    };   
  }
)
console.log(staffCategoryEnum);

  const columns: ProDescriptionsItemProps<API.StaffInfo>[] = [
    { title: 'Index', dataIndex: 'index', valueType: 'indexBorder', align: 'center', width: 60 },
    { title: 'Name', dataIndex: 'stf_name', initialValue: "" },
    { title: 'Category', dataIndex: 'stf_category', valueEnum: staffCategoryEnum },
    { title: 'Remark', dataIndex: 'stf_remark',  hideInSearch: true},
    { title: 'Status', hideInSearch: true,
      render: (_, record) => record.stf_invalid === 0 ? (<Tag color="#ccc">dismission</Tag>) : (<Tag color="#87d068">instate</Tag>)
    },
    { title: 'Option', dataIndex: 'option', hideInSearch: true, 
      render: (_, record) => (
        <>
          {React.cloneElement(children[1], {echoRecord: record}, <Button type="primary" icon={<FormOutlined />}>Edit</Button>)}
          <Divider type="vertical" />
          {record.stf_invalid === 0 ? (
            <Popconfirm 
              title={`Are your sure reinstate staff："${record.stf_name}" ？`}
              onConfirm={() => handleReinstate(record)}
              onCancel={() => message.info('you cancel reinstate!')}
              okText="Yes"
              cancelText="No"
              placement="topRight"
            ><Button type="dashed">Reinstate</Button></Popconfirm>
          ) : (
            <Popconfirm 
              title={`Are your sure dismiss staff："${record.stf_name}" ？`}
              onConfirm={() => handleDismiss(record)}
              onCancel={() => message.info('you cancel dismiss!')}
              okText="Yes"
              cancelText="No"
              placement="topRight"
            ><Button danger>Dismiss</Button></Popconfirm>
          )}
        </>
      )
    }
  ]

  const proTableProps = {
    cardBordered: true,
    bordered: true,
    headerTitle: "STAFF LIST",
    search: {searchText: "Search", resetText: "Reset"},
    actionRef: actionRef,
    pagination: {pageSize: 10},
    toolBarRender: () => React.cloneElement(children[0], null, <Button type="primary" icon={<PlusOutlined />}>Add</Button>),
    rowKey: "stf_id",
    columns: columns,
    request: async(params) => {
      const {current, pageSize, stf_name, stf_category} = params
      const {list, total} = await handleQuery({pageSize, begin: (current - 1) * pageSize, stf_name, stf_category})
      return {
        data: list,
        success: true,
        total
      }
    }
  }

  return (<ProTable<API.StaffInfo> {...proTableProps} />)
}

export default StaffList

